<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Bootstrap表格插件Bootstrap Table配置教程 - itxst.com</title>
    <meta name="keywords" content="Bootstrap Table入门教程,Bootstrap Table配置,Bootstrap表格插件" />
    <meta name="description" content="Bootstrap Table是一款功能强大的bootstrap表格插件,包含服务器分页、前端分页、查询刷选、列排序等等各种功能。本教程详细阐述了Bootstrap-Table的各种用法，包含了在线例子和案例下载。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/Bootstrap-Table/QuickStart.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/Bootstrap-Table/QuickStart.html">Bootstrap表格插件Bootstrap Table配置教程</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="Bootstrap-Table">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>Bootstrap表格插件Bootstrap Table配置教程</h1>
               
               <p>Bootstrap Table快速入门教程,本文演示了前端加载数据和服务器端加载数据的最基本的配置。<br/></p><h2>依赖环境<br/></h2><p>&nbsp; &nbsp; &nbsp; &nbsp; 1，bootstrap-4<br/>&nbsp; &nbsp; &nbsp; &nbsp; 2，jquery<br/></p><h2>网页引用文件</h2><pre class="brush:js;toolbar:false"><code>&lt;script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"&gt;&lt;/script&gt;
&lt;link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" /&gt;
&lt;link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" /&gt;
&lt;script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"&gt;&lt;/script&gt;</code></pre><h2>配置说明：</h2><p>&nbsp; &nbsp;1,columns 需要显示的列表<br/></p><pre class="brush:js;toolbar:false"><code>var   columns=[{
                field: 'Id',
                title: '编号'
            }, {
                field: 'ProductName',
                title: '产品名称'
            }, {
                field: 'StockNum',
                title: 'Item 库存'
            }];</code></pre><p>&nbsp; &nbsp;2,data需要显示的数据<br/></p><pre class="brush:js;toolbar:false"><code>    var  data=[{
                Id: 1,
                ProductName: '香蕉',
                StockNum: '100'
            }, {
                  Id: 2,
                ProductName: '苹果',
                StockNum: '200'
            }]</code></pre><h2>前端加载数据例子</h2><pre class="brush:html;toolbar:false"><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
&lt;script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"&gt;&lt;/script&gt;
&lt;link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" /&gt;
&lt;link href="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" /&gt;
&lt;script src="https://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"&gt;&lt;/script&gt;
    &lt;title&gt;Bootstrap Table入门例子&lt;/title&gt;
    &lt;style&gt;
        .table-demo {
        width:80%;
        margin:30px auto 0px auto;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="table-demo"&gt;
        &lt;table id="table"&gt;&lt;/table&gt;
    &lt;/div&gt;
    &lt;script&gt;
      //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        //需要显示的数据
        var data = [{
            Id: 1,
            ProductName: '香蕉',
            StockNum: '100'
        }, {
            Id: 2,
            ProductName: '苹果',
            StockNum: '200'
            }];
        //bootstrap table初始化数据
        $('#table').bootstrapTable({
            columns: columns,
            data: data
        });
 
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h2>服务端加载数据例子</h2><pre class="brush:html;toolbar:false"><code>       //设置需要显示的列
        var columns = [{
            field: 'Id',
            title: '编号'
        }, {
            field: 'ProductName',
            title: '产品名称'
        }, {
            field: 'StockNum',
            title: 'Item 库存'
        }];


        $('#table').bootstrapTable({
            url: 'js/data.json',
            pagination: true,//开启分页
            search: true, //开启刷选
            columns: columns
        });</code></pre><p><a class="btntryl" href="http://debug.itxst.com/js/bootstrap-table" target="_blank">在线试一试</a> &nbsp; <a class="btntry" href="https://img1.itxst.com/8/3/83b2a56b949e50ac36aa5bbb0a0a63cb.zip" target="_blank">下载文件</a></p>
 
               
                </div>
                <div class="content-r">   <a href="/Bootstrap-Table/QuickStart.html" target="_self">
                     <img src="//img1.itxst.com/0/3/03e991f5ec5a1dc364b14eebcc22d59a.png" alt="Bootstrap表格插件Bootstrap Table配置教程" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
            <a data-level="1" class="leve-1   doc-1    doc-2 " href="/Bootstrap-Table/QuickStart.html" title="Bootstrap表格插件Bootstrap Table配置教程">快速入门</a>
            <a data-level="1" class="leve-1   doc-1   " href="/bootstrap-table-methods/tutorial.html" title="bootstrap table方法">bootstrap table方法</a>
            <a data-level="1" class="leve-1   doc-1   " href="/bootstrap-table-events/tutorial.html" title="bootstrap table事件">bootstrap table事件</a>
            <a data-level="1" class="leve-1   doc-1   " href="/Bootstrap-Table/down.html" title="bootstrap table下载">bootstrap table下载</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">基础配置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/quyqimb6.html" title="通过Row Attributes设置Bootstrap Table行属性(鼠标行title提示)">row Attributes设置行属性</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/vmvfaaey.html" title="Custom Sort bootstrap-table 自定义排序">custom Sort自定义排序</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/znm7nuzu.html" title="Bootstrap Table Cache缓存数据">table Cache缓存数据</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/qr6jbrvn.html" title="Bootstrap Table 发送Header的Content Type设置">content Type设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/bury3yyb.html" title="bootstrap table Response Handler数据预处理">response Handler</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/aqaejavn.html" title="bootstrap table Total/Data Field服务器返回JSON格式">total/Data Field JSON格式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/ymefm3yz.html" title="bootstrap table escape显示html标签">escape显示html标签</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/nzz63evq.html" title="bootstrap table idField和selectItemName">idField和selectItemName</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/qm2yviju.html" title="bootstrap table Card View 卡片视图模式">cardView卡片视图模式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/bvnbvvbb.html" title="bootstrap table detailView详情视图树形模式">detailView详情视图模式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/zv7vf2uy.html" title="bootstrap table  icons 图标相关设置">icons图标相关设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/rvfbrnva.html" title="bootstrap table本地化中文设置">本地化中文设置</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">列相关设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/bvuuybaa.html" title="Table Columns设置bootstrap table要显示的列">columns基础设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/feaq2yym.html" title="bootstrap table点击列排序sortable">sortable列排序</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/bnynvfqu.html" title="bootstrap table clickToSelect、ignoreClickToSelectOn、singleSelect、checkboxHeader详细说明">column选择操作列</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/jn3ienrr.html" title="Bootstrap Table Column列属性设置">column列属性列表</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">分页设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/mynyeqba.html" title="bootstrap table 服务器端分页">bootstrap table服务端分页</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/mraj7fnu.html" title="Bootstrap Table数据Post Get方式设置">table Method 方式设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/u3i32eni.html" title="Bootstrap Table Data Type 返回数据格式">data Type数据格式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/qyaqimvi.html" title="bootstrap table Custom AJAX 自定义ajax请求">custom AJAX 自定义ajax</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/jjamaez7.html" title="bootstrap table前端分页">bootstrap table前端分页</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/i3yqb332.html" title="bootstrap table查询搜索配置">bootstrap table查询搜索</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/jzv6brrz.html" title="bootstrap table smartDisplay的作用">smartDisplay作用</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/vqqirffi.html" title="bootstrap table分页时保持选择状态，非常有用的功能">分页时保持选择状态</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">工具栏相关</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/my67v2ua.html" title="bootstrap table showHeader显示表格头部">showHeader显示头部</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/iyezmyb6.html" title="bootstrap table showFooter显示隐藏表格底部">showFooter显示底部</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/q6zzj3en.html" title="showColumns bootstrap table开启列刷选">showColumns开启列刷选</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/uf63ezbn.html" title="showPaginationSwitch开启显示和关闭分页按钮">showPaginationSwitch分页</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/ayne2aye.html" title="Bootstrap Table showRefresh显示刷选按钮">showRefresh刷选按钮</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/2uyvaeff.html" title="Bootstrap Table showFullscreen显示全屏按钮">showFullscreen</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/toolbar.html" title="bootstrap table toolbar buttonsToolbar工具栏">toolbar工具栏设置</a>
            <a data-level="1" class="leve-1    arrow-2" href="javascript:void(0);" onclick="showHidee(this)">样式设置</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/iirmi3um.html" title="Bootstrap Table固定表头并美化表头">固定表头并美化表头</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/aumyuffe.html" title="设置Bootstrap Table表格样式并隔行变色">设置表格样式隔行变色</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/mmy2uuem.html" title="rowStyle设置Bootstrap Table行样式">rowStyle设置行样式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/jmuj2y7v.html" title="theadClasses设置Bootstrap Table表头样式">theadClasses设置表头样式</a>
            <a data-level="2" class="leve-2   doc-1   " href="/Bootstrap-Table/fernjf6j.html" title="设置bootstrap table footerStyle表格底部样式">footerStyle底部样式</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
